<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./point.js"></script>
    <style>
        body{
            margin: 0;
        }
        .component {
            background-color: #13022c;
            color: #fff;
            box-sizing: border-box;
            padding: 20px 0;
        }
        
        /* .bg {
            position: absolute;
            width: 100%;
            height: 100%;
        } */
        
        .lotterybg {
            margin-top: 140px;
            position: absolute;
            background-size: contain;
            overflow: visible;
            width: 100%;
            /* height: 100%; */
            height: 442px;
        }
        
        #myCanvas {
            position: absolute;
            border: none;
        }
        
        #start {
            position: absolute;
            z-index: 3;
            width: 50px;
            margin-top: 370px;
            margin-left: 50%;
        }
        
        .imgSrc {
            display:none;
            position: absolute;
        }
        
        #award {
            position: absolute;
            border: none;
        }
        .awardImgUrl{
            width :100%;
            height :100%
        }
        #awardBall{
            display :none
        }
        .dropBall {
            content: "";position: absolute;left: 0;top: 0;
            width: 100%;height: 100%;
            display: block;
            background-size: contain;
            animation: drop 1s ease-out forwards;
            -webkit-animation: drop 1s ease-out forwards;
        }
        @keyframes drop {
            0% {
                transform: scale(0.7);
            }
            50% {
                transform: scale(1);
            }
            51% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(10px);
            }
        }
        
        @-webkit-keyframes drop {
            0% {
                -webkit-transform: scale(0.7);
            }
            50% {
                -webkit-transform: scale(1);
            }
            51% {
                -webkit-transform: translateY(0px);
            }
            100% {
                -webkit-transform: translateY(10px);
            }
        }

        .top_title{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .top_title_name{
            color:#d8ceb3;
            max-width: 60px;
            overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
        }
        .main{
            padding-top: 582px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main_left{
            position: absolute;
            left: 15px;
            top: 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
        }
        .progress{
            height: 200px;
            width: 20px;
            border-radius: 20px;
            box-sizing: border-box;
            border: 3px solid #6a6a6a;
            display: flex;
            flex-direction: column;
            /* align-items: flex-end; */
            justify-content: flex-end;
        }
        .linearColorsame{
            width:100%;
            height: 180px;
            background:#feffd5;
            border-radius: 20px;
            box-shadow: 0px 0px 16px 6px #e0d561;
        }
        .open_btn{
            padding: 2px 8px;
            border-radius: 50px;
            background-color: #2a1c40;
        }

        /* 主体右侧 */
        .main_right{
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .main_right_item{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
        }
        .main_right_item img{
            width: 30px;
            height: 30px;
        }
        .main_right_item span{
            font-size: 12px;
            margin-top: 10px;
        }

        .main_bottom{
            position: absolute;
            bottom: 28px;
            left: 10%;
        }

.turntable_footer{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.surplus{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.surplus view{
    margin-right: 15px;
}
.surplus_gain{
    width: 77px;
    height: 26px;
    background: #D73D3D;
    border-radius: 36px;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    line-height: 26px;
    margin-left: 46px;
}
.surplus_btns{
    width: 311px;
    height: 50px;
    background: linear-gradient(127deg, #FD5A85 0%, #FFDE6B 100%);
    box-shadow: inset 3px 3px 3px 1px #FFFFFF;
    border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
    /* display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box; */
}
/* .surplus_btn{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #762c8b;
    border-radius: 100px;
    padding: 6px 0;
} */
.turntable_popup{
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 263px;
    height: 317px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.16);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    box-sizing: border-box;
    padding: 20px 0;
}
.turntable_popup_btn{
    width: 200px;
    height: 44px;
    background: linear-gradient(122deg, #FD5A85 0%, #FFDE6B 100%);
    border-radius: 28px;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 44px;
}


    </style>
</head>
<body>
    <div class="component" id="app">
        <div class="bg">
            <div class="lotterybg" :style="`background: url(`+canvasUrl+`) no-repeat;background-size:100% auto;`">
                <canvas :style="canvasStyle" id="myCanvas"></canvas>
            </div>
        </div>
        <div v-for="(item,index) in prizeList" :key="index">
            <img :src="item.picUrl" class="imgSrc" />
        </div>
        <!-- <img src="https://t7.baidu.com/it/u=547832634,1492983879&fm=193" id="start" @click="play" /> -->
        <div id="award" :style="awardStyle">
            <span id="awardBall" :style="`background: url(`+awardImgUrl+`)center center / cover no-repeat`"></span>
        </div>

        <div>
            <div class="top_title">
                <div class="top_title_name">{{name}}</div>
                <div>在秋日物语获得</div>
                <div style="color:#d8ceb3;">{{prize}}</div>
            </div>
        </div>

        <div class="main">
            <div class="main_left">
                <div class="progress">
                    <div class="linearColorsame" :style="{height:height}"></div>
                </div>
                <div style="color:#fcf570">46%</div>
                <div style="color:#948ca1;margin: 8px 0;">暴走值</div>
                <div class="open_btn">未开启</div>
            </div>

            <div class="main_right">
                <div class="main_right_item">
                    <img src="./images/16@2x.png" alt="">
                    <span>奖品</span>
                </div>
                <div class="main_right_item">
                    <img src="./images/15@2x.png" alt="">
                    <span>中奖纪录</span>
                </div>
                <div class="main_right_item">
                    <img src="./images/14@2x.png" alt="">
                    <span>规则</span>
                </div>
            </div>

            <div class="surplus main_bottom">
                <div>
                    <span>我的钻石：</span>
                    <span>{{num}}</span>
                </div>
                <div class="surplus_gain">获取</div>
            </div>

        </div>

        <div>
            <div class="turntable_footer">
                
                <div @click="play" class="surplus_btns">
                    <span style="font-size: 18px;">3000</span>
                    <img src="./images/24@2x.png" mode="" style="width: 16px;height: 12px;margin-left: 12px;">
                    </img>
                    <span style="font-size: 12px;">/1次</span>
                </div>
            </div>
            <!-- <div style="display: flex;align-items: center;justify-content: center;">
                <img src="https://img1.baidu.com/it/u=1804279119,998853692&fm=253&fmt=auto&app=138&f=JPEG?w=498&h=500" alt="" style="width: 10px;height: 10px;">
                <div>
                    <span>剩余欢乐券：</span>
                    <span>4</span>
                </div>
                <div>
                    <div>获取换了券</div>
                    <img src="" alt="">
                </div>
            </div>
            <div style="display: flex;align-items: center;justify-content: center;">
                <div style="display: flex;align-items: center;justify-content: center;">
                    <div>
                        <div>1次</div>
                        <div>1欢乐券</div>
                    </div>
                    <div>
                        <div>10次</div>
                        <div>10欢乐券</div>
                    </div>
                    <div>
                        <div>100次</div>
                        <div>100欢乐券</div>
                    </div>
                </div>
                <div @click="play">
                    <div>开始</div>
                    <div>start</div>
                </div>
            </div> -->
        </div>

        <div class="turntable_popup" v-if="turntable_popup_show">
            <div>手气不错</div>
            <div style="color: #999999;">恭喜获得奖励,可在背包里查看</div>
            <div style="width: 88px;
        		        height: 88px;
        		        background: #413354;
        		        border-radius: 4px;
        		        display: flex;
        		        align-items: center;
        		        justify-content: center;">
                <img src="http://yunliaos.oss-cn-beijing.aliyuncs.com/image/18fdb54bee96456b9d586288b8cdb088.jpg" style="width: 75px;height: 75px;">
            </div>
            <div style="text-align: center;">
                <div>海洋之星</div>
                <div style="color: #999999;">200钻石</div>
            </div>
            <div @click="turntable_popup_show=false" class="turntable_popup_btn">确定</div>
        </div>


    </div>

    <script>
        // import Ball from './point.js'
        new Vue({
            el: '#app',
            // 第三步   挂载组件
            props: {
                canvasUrl: {
                    editor: {
                        type: 'image',
                        label: '扭蛋机背景图',
                    },
                    type: String,
                    default: './images/5@2x.png',
                },
                isData: {
                    type: Boolean,
                    default: false,
                    editor: {
                        type: 'boolean',
                        label: '是否数据源'
                    }
                },
                dataScoped: {
                    type: String,
                    default: '',
                    editor: {
                        type: 'string',
                        label: '数据源名称（dataHub）'
                    }
                },
                imgUrl: {
                    type: Array,
                    default() {
                        return [
                            {
                                url: 'https://vueweb.oss-cn-qingdao.aliyuncs.com/vueweb/resource/ymm_1632810357807.png'
                            }
                        ]
                    },
                    editor: {
                        ignore: true
                    }
                },
                canvasWidth: {
                    default: 260,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域的宽',
                    }
                },
                canvasHeight: {
                    default: 260,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域的高',
                    }
                },
                canvasTop: {
                    default: 26,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域距离顶部的距离',
                    }
                },
                canvasLeft: {
                    default: 26,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域距离左侧的值',
                    }
                },
                canvasBorderRadius: {
                    default: '200px',
                    type: String,
                    editor: {
                        type: 'string',
                        label: '扭蛋区域的圆角',
                    }
                },
                canvasPadding: {
                    default: 20,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域内边距',
                    }
                },
                ballWidth: {
                    default: 65,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋宽',
                    }
                },
                ballHeight: {
                    default: 66,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋高',
                    }
                },
                awardPosition: {
                    type: String,
                    default: 'width: 50px;height: 50px;bottom: 48%;right:7%',
                    editor: {
                        type: 'string',
                        label: '出口位置'
                    }
                },
                functionPop: {
                    type: String,
                    editor: {
                        type: 'string',
                        label: '抽奖完成奖品弹出框方法:',
                    },
                },
            },
            computed: {
                // 数据源列表
                prizeList() {
                    if (this.isData) {
                        if (!this.isEmpty(this.$parent.DataHub) && !this.isEmpty(this.$parent.DataHub[this.dataScoped])) {
                            return this.$parent.DataHub[this.dataScoped]
                        } else {
                            return []
                        }
                    } else {
                        return this.fakeDataSource
                    }
                },
                canvasStyle() {
                    let style = {
                        top: this.canvasTop + 'px',
                        // left: this.canvasLeft + 'px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        borderRadius: this.canvasBorderRadius,
                        padding: this.canvasPadding + 'px',
                    }
                    return style
                },
                awardStyle() {
                    return `${this.awardPosition};color:${this.itemTextColor};`
                },
            },
            data() {
                return {
                    token: '',
                    baseUrl: '',
                    height: '50%',
                    name: '湿湿/分分分那你发',
                    prize: '时空守护（16666）x 1',

                    canvas: '',
                    ctx: '',
                    ballList: [],
                    ballNum: '',// 扭蛋机里面的小球数
                    awardList: [],
                    scale: 1,
                    fakeDataSource: [
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/7.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/6.png',
                        }, {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/7.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/6.png',
                        }, {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                    ],
                    awardImgUrl: 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',

                    num:0,
                    turntable_popup_show:true,
                
                }
            },
            created() {
                console.log(this.$route);
                // this.token = this.$route.query.token||'11111111';
                // this.baseUrl = this.$route.query.baseUrl || 'http://192.168.1.25:8182';
                this.token = '11111111';
                this.baseUrl = 'http://192.168.1.25:8182';

                var player = new SVGA.Player('#demoCanvas');
                var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
                parser.load('https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga', function (videoItem) {
                    player.setVideoItem(videoItem);
                    player.startAnimation();
                })
            },
            editorMethods: {
            },
            watch: {
            },
            mounted() {
                this.demo();
            },
            methods: {
                demo() {
                    this.canvas = document.getElementById('myCanvas')
                    this.scale = window.devicePixelRatio
                    this.canvas.width = this.canvasWidth * this.scale
                    this.canvas.height = this.canvasHeight * this.scale
                    this.canvas.style.width = this.canvas.width / this.scale + 'px'
                    this.canvas.style.height = this.canvas.height / this.scale + 'px'
                    this.ctx = this.canvas.getContext('2d')
                    this.ballList = Array.from(document.getElementsByClassName('imgSrc'))
                    this.ballNum = this.ballList.length // 扭蛋机里面的小球数
                    console.log(this.ballNum);
                    setTimeout(() => {
                        for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                            this.awardList[i] = new Ball(this.canvas, this.ballList[i], this.ballWidth, this.ballHeight, i) // 新建小球对象
                        }
                    })
                },
                isEmpty(str) {
                    if (typeof str == 'undefined' || str == null || str == '') {
                        return true
                    } else {
                        return false
                    }
                },
                play() {
                    if(this.turntable_popup_show)return;
                    var award = document.getElementById('awardBall')
                    award.removeAttribute('class', 'dropBall')
                    if (this.awardList.length === 0) { // 奖池中没有小球
                        this.init()
                    } else {
                        window.clearInterval(this.timer) // 清除计时器
                        this.timer = setInterval(() => {
                            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                            for (let i = 0; i < this.awardList.length; i++) {
                                this.awardList[i].run(this.ctx, this.canvas, this.ballWidth, this.ballHeight)
                            } // 使小球运动
                        }, 15)
                        this.clear()
                    }
                },
                init() { // 初始化
                    for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                        let index = Math.floor(4 * Math.random())
                        this.awardList[i] = new Ball(this.canvas, index, this.ballList[index]) // 新建小球对象
                    }
                    window.clearInterval(this.timer) // 清除计时器
                    this.timer = setInterval(() => {
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                        for (let i = 0; i < this.awardList.length; i++) {
                            this.awardList[i].run(this.ctx, this.canvas, this.ballWidth, this.ballHeight)
                        } // 使小球运动
                    }, 100)
                    this.clear()
                },
                clear() {
                    var award = document.getElementById('awardBall')
                    document.getElementById('awardBall').style.display = 'inline'
                    setTimeout(() => {
                        window.clearInterval(this.timer) // 清除计时器
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                        for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                            this.awardList[i] = new Ball(this.canvas, this.ballList[i], this.ballWidth, this.ballHeight, i) // 新建小球对象
                        }
                        award.setAttribute('class', 'dropBall')
                        axios({
                            headers: {
                                Authorization: this.token,
                                'Content-Type': 'application/json'
                            },
                            method: 'post',
                            url: this.baseUrl + "/app/prize/count",
                            data: {
                                id: 1,
                                count: 1,
                                diamond: 3000
                            },
                        }).then((res) => {
                            this.turntable_popup_show = true;
                        });
                    }, 1500)
                    let that = this
                    setTimeout(() => {
                        if (!that.functionPop) {
                            return
                        }
                        eval(`that.${that.functionPop}()`)
                        console.log('22222222222');
                    }, 1600)
                }
            }
        })
    </script>
    
</body>
</html>